<template>
  <div>

        <div slot="header" class="has-text-centered">
          <p class="is-size-5 has-text-weight-bold">{{ this.goodsName }}</p>
          <div class="has-text-grey is-size-7 mt-3">
            <span>入库id： {{ this.inWarehouseIdStr }}</span>
          </div>
        </div>

        <el-descriptions class="margin-top" title="入库信息" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <em class="el-icon-user"></em>
              入库单号
            </template>
            {{ this.inWarehouseIdStr }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <em class="el-icon-user"></em>
              物资名称
            </template>
            {{ this.goodsName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <em class="el-icon-user"></em>
              仓库名称
            </template>
            {{ this.warehouseName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <em class="el-icon-mobile-phone"></em>
              入库库区
            </template>
            {{ this.warehouseArea }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <em class="el-icon-location-outline"></em>
              入库数量
            </template>
            {{ this.inWarehouseGoodsNum }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <em class="el-icon-location-outline"></em>
              预计入库时间
            </template>
            {{ this.scheduledInWarehouseTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <em class="el-icon-tickets">实际入库时间</em>

            </template>
            {{ this.inWarehouseTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <em class="el-icon-tickets">相关项目</em>

            </template>
            {{ this.relatedItemId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <em class="el-icon-office-building"></em>
              入库负责人
            </template>
            {{ this.inWarehouseTransactorName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <em class="el-icon-office-building"></em>
              入库类型
            </template>
            {{ this.inWarehouseTypeId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <em class="el-icon-office-building"></em>
              入库备注
            </template>
            {{ this.inWarehouseRemark }}
          </el-descriptions-item>
        </el-descriptions>
    <el-row style="margin-top:20px">
      <el-col :span="4">
        <el-button type="success" @click="handleConfirm()" v-if="this.reqStateName==='请求审批通过'">确认完成入库</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="pass()" v-if="this.reqStateName==='请求审批中'">通过申请</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="danger" @click="reject()" v-if="this.reqStateName==='请求审批中'">驳回申请</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getInWrhsDetail,inWrhsApprove,inWrhsConfirm} from "@/api/warehouseGoods";
import {mapGetters} from "vuex";

import "vditor/dist/index.css";

export default {
  name: "InWrhsDetailComp",
  computed: {
    ...mapGetters(["token", "user"]),
  },
  data() {
    return {
      inWarehouseId: null,
      inWarehouseIdStr: "",
      warehouseId: null,
      warehouseName: "",
      warehouseArea: "",
      goodsIdStr: "",
      goodsName: "",
      reqStateName:"",
      inWarehouseGoodsNum: null,
      scheduledInWarehouseTime: null,
      inWarehouseTime: null,
      inWarehouseRemark: "",
      relatedItemId: null,
      reqStateId: null,
      inWarehouseTransactorName: null,
      inWarehouseTypeId: null,

    };
  },
  mounted() {
    this.fetchInfo();
  },
  methods: {
    pass() {
      inWrhsApprove(this.$refs["InWrhsDetailComp"].inWarehouseIdStr, "pass", this.user.userIdStr)
      {
        this.$router.push({ name: 'inWrhsDetail' , params: { inWrhsIdStr: this.$refs["InWrhsDetailComp"].inWarehouseIdStr }});
      }
    },

    reject() {
      inWrhsApprove(this.$refs["InWrhsDetailComp"].inWarehouseIdStr,"reject", this.user.userIdStr)
      {
        this.$router.push({ name: 'inWrhsDetail' , params: { inWrhsIdStr: this.$refs["InWrhsDetailComp"].inWarehouseIdStr }});
      }
    },
    handleConfirm() {
      inWrhsConfirm(this.$refs["InWrhsDetailComp"].inWarehouseIdStr, this.user.userIdStr)
      {
        this.$router.push({
          name: 'inWrhsDetail',
          params: {
            inWrhsIdStr: this.$refs["InWrhsDetailComp"].inWarehouseIdStr
          }
        });
      }
    },
    // 初始化
    async fetchInfo() {
      getInWrhsDetail(this.$route.params.inWrhsIdStr).then((response) => {
        const {data} = response;
        this.inWarehouseIdStr = data.inWarehouseIdStr;
        this.warehouseId = data.warehouseId;
        this.warehouseName = data.warehouseName;
        this.warehouseArea = data.warehouseArea;
        this.goodsIdStr = data.goodsIdStr;
        this.goodsName = data.goodsName;
        this.reqStateName = data.reqStateName;
        this.inWarehouseGoodsNum = data.inWarehouseGoodsNum;
        this.scheduledInWarehouseTime = data.scheduledInWarehouseTime;
        this.inWarehouseTime = data.inWarehouseTime;
        this.inWarehouseRemark = data.inWarehouseRemark;
        this.relatedItemId = data.relatedItemId;
        this.reqStateId = data.reqStateId;
        this.inWarehouseTransactorName = data.inWarehouseTransactorName;
        this.inWarehouseTypeId = data.inWarehouseTypeId;
      });
    },
  },
};
</script>

<style>

.shortDiv {
  min-height: 60px;
  word-break: break-all;
}
</style>
